<!doctype html>
<html>
<head>
    <meta charset="utf-8">
</head>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<!-- 引入样式 -->
<link href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<body>
<div id="app">
    <h4>查询数据</h4>
    <el-form :inline="true">
        <el-form-item label="开奖日期">
            <el-date-picker
                    placeholder="选择起始日期"
                    type="date"
                    v-model="begin">
            </el-date-picker>
            至
            <el-date-picker
                    placeholder="选择结束日期"
                    type="date"
                    v-model="end">
            </el-date-picker>
        </el-form-item>
        <el-form-item>
            <el-button @click="query(1)" type="primary">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="data" style="width: 100%">
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="日期" prop="opendate"></el-table-column>
        <el-table-column label="期号" prop="num"></el-table-column>
        <el-table-column label="红1" prop="redone"></el-table-column>
        <el-table-column label="红2" prop="redtwo"></el-table-column>
        <el-table-column label="红3" prop="redthree"></el-table-column>
        <el-table-column label="红4" prop="redfour"></el-table-column>
        <el-table-column label="红5" prop="redfive"></el-table-column>
        <el-table-column label="红6" prop="redsix"></el-table-column>
        <el-table-column label="蓝球" prop="blue"></el-table-column>
        <el-table-column label="销售额" prop="sale"></el-table-column>
        <el-table-column label="一等奖" prop="firstprize"></el-table-column>
        <el-table-column label="二等奖" prop="secondeprize"></el-table-column>
    </el-table>
    <div id="pages">
        <el-pagination :page-size="5" @current-change="query"
                       :total="total" background layout="prev, pager, next"/>
    </div>
</div>
<script>
    var v = new Vue({
        el: "#app",
        data: {
            begin: new Date(),
            end: new Date(),
            data: [],
            total: 0,
            page: 1,
            size: 5,

        },
        created() {
            this.query()
        },
        methods: {
            query(currentPage) {
                this.page = currentPage;
                let url = "query.s";
                axios.get(url, {
                    params: {
                        begin: this.fmtDate(this.begin),
                        end: this.fmtDate(this.end),
                        page: this.page,
                        size: this.size,
                    }
                }).then(res => {
                    this.data = res.data.list;
                    this.total = res.data.total;
                })
            },
            fmtDate(date) {
                let year = date.getFullYear();
                let month = date.getMonth();
                let day = date.getDate();
                if (month < 10) month = "0" + month;
                if (day < 10) day = "0" + day;
                return `${year}-${month}-${day}`;
            }
        }
    })
</script>
</body>
</html>

<style>
    html,
    body {
        height: 100%;
        padding: 0px;
        margin: 0px;
        overflow: hidden;
        color: #333;
    }

    #app {
        margin: 50px;
    }

    form {
        text-align: right;
        display: inline-block;
    }

    input {
        width: 200px;
    }

    button {
        padding: 0px 20px;
    }

    form {
        margin: 10px 0px;
    }

    table {
        width: 100%;
        border-spacing: 0px;
    }

    th, td {
        padding: 3px;
    }

    td {
        text-align: right;
    }

    th {
        background-color: aqua
    }

    td:nth-child(1) {
        text-align: center;
    }

    #pages {
        padding: 10px;
        text-align: right;
    }

    #pages > span {
        background-color: #ddd;
        margin: 2px;
        padding: 2px 5px;
        border-radius: 2px;
        min-width: 15px;
        display: inline-block;
        text-align: center;
        cursor: pointer;
    }

    #pages > span.current {
        background-color: #aaa;
    }

    #pages > span:hover {
        background-color: beige;
        color: green;
    }

</style>
